<template>
  <div class="customer-detail-container">
    <h4>客戶資訊</h4>
    <div class="base-info br-10">
      <div class="left">
        <svg-icon icon-class="avatar-3"></svg-icon>
        <div>北京XXXX科技有限公司</div>
      </div>
      <div class="right">
        <h5>基礎資訊</h5>
        <div class="one">
          <div>
            <span>聯絡人：</span>
            <span>李四</span>
            <span class="group br-10 vip">貴賓</span>
          </div>
          <div>
            <span>信箱：</span>
            <span>yu@icloud.com</span>
          </div>
          <div>
            <span>客戶來源：</span>
            <span>廣告推薦</span>
          </div>
        </div>
        <div class="two">
          <div>
            <span>電話：</span>
            <span>15844446666</span>
          </div>
          <div>
            <span>地址：</span>
            <span>北京市</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main-wrap br-10">
      <div class="btn">
        <el-button type="primary" @click.native="handleClick">
          <svg-icon icon-class="staff-add"></svg-icon>
          {{ btnName }}
        </el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="項目記錄" name="first">
          <div class="item-record-table" v-if="activeName === 'first'">
            <el-table :data="itemRecordData" :header-cell-style="{ background: 'rgba(60,88,252,0.08)' }">
              <el-table-column label="專案資訊">
                <template>
                  <span>xxxx项目</span>
                </template>
              </el-table-column>
              <el-table-column label="項目內容">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="服務日期">
                <template>
                  <span>2025-08-102025-08-10</span>
                </template>
              </el-table-column>
              <el-table-column label="項目狀態">
                <template>
                  <span class="status br-15 success">完成</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-foot">
              <div>
                <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="產品記錄" name="second">
          <div class="product-record-table" v-if="activeName === 'second'">
            <el-table :data="productRecordData" :header-cell-style="{ background: 'rgba(60,88,252,0.08)' }">
              <el-table-column label="產品信息">
                <template>
                  <span>xxxx项目</span>
                </template>
              </el-table-column>
              <el-table-column label="產品內容">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="服务日期">
                <template>
                  <span>2025-08-102025-08-10</span>
                </template>
              </el-table-column>
              <el-table-column label="產品狀態">
                <template>
                  <span class="status br-15 success">完成</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-foot">
              <div>
                <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="發票信息" name="third">
          <div class="invoice-info-table" v-if="activeName === 'third'">
            <el-table :data="invoiceInfoData" :header-cell-style="{ background: 'rgba(60,88,252,0.08)' }">
              <el-table-column label="開票方">
                <template>
                  <span>xxxx项目</span>
                </template>
              </el-table-column>
              <el-table-column label="納稅人識別號">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="地址">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="電話">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="開戶行">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="銀行賬號">
                <template>
                  <span>與王經理進行初次溝通</span>
                </template>
              </el-table-column>
              <el-table-column label="發票類型">
                <template>
                  <span class="invoice-type br-15 common">普通</span>
                </template>
              </el-table-column>
              <el-table-column label="開票狀態">
                <template>
                  <span class="status br-15 success">完成</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-foot">
              <div>
                <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="新增項目" class="add-item-dialog" :visible.sync="addItemVisible" width="680px" top="5%">
      <el-form :model="addItemFormData" label-position="top" inline>
        <div>
          <div>
            <el-form-item label="項目名稱">
              <el-input v-model="addItemFormData.name" autocomplete="off" placeholder="項目名稱"></el-input>
            </el-form-item>
            <el-form-item label="項目類型">
              <el-select placeholder="項目類型">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="負責人">
              <el-input v-model="addItemFormData.name" autocomplete="off" placeholder="負責人"></el-input>
            </el-form-item>
            <el-form-item label="項目類型">
              <el-select placeholder="項目類型">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客戶ID">
              <el-input v-model="addItemFormData.name" autocomplete="off" placeholder="客戶ID"></el-input>
            </el-form-item>
            <el-form-item label="是否審批">
              <el-select placeholder="是否審批">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="項目簡介" style="width: 100%">
              <el-input type="textarea" rows="3"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addItemVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddItem">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增產品" class="add-product-dialog" :visible.sync="addProductVisible" width="680px" top="5%">
      <el-form :model="addProductFormData" label-position="top" inline>
        <div>
          <div>
            <el-form-item label="產品資訊">
              <el-input v-model="addProductFormData.name" autocomplete="off" placeholder="客戶姓名"></el-input>
            </el-form-item>
            <el-form-item label="產品日期">
              <el-date-picker></el-date-picker>
            </el-form-item>
            <el-form-item label="產品狀態">
              <el-select placeholder="產品狀態">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="產品詳情" style="width: 100%">
              <el-input type="textarea" rows="3"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddProduct">保存</el-button>
      </div>
    </el-dialog>
    <!--<el-dialog title="新增發票" class="add-invoice-dialog" :visible.sync="addInvoiceVisible" width="680px" top="5%">-->
    <!--  <el-form :model="addInvoiceFormData" label-position="top" inline>-->
    <!--    <div>-->
    <!--      <div>-->
    <!--        <el-form-item label="客戶姓名">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶姓名"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客戶編號">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶編號"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客戶分類">-->
    <!--          <el-select placeholder="客戶分類">-->
    <!--            <el-option></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客戶來源">-->
    <!--          <el-select placeholder="客戶來源">-->
    <!--            <el-option></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="聯絡人咨詢">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="聯絡人咨詢"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="電子郵箱">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="電子郵箱"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客戶地址">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶地址"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="聯絡人電話">-->
    <!--          <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="聯絡人電話"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="客戶簡介" style="width: 100%">-->
    <!--          <el-input type="textarea" rows="3"></el-input>-->
    <!--        </el-form-item>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </el-form>-->
    <!--  <div slot="footer" class="dialog-footer">-->
    <!--    <el-button @click="addCustomerVisible = false">取消</el-button>-->
    <!--    <el-button type="primary" @click="submitAddCustomer">保存</el-button>-->
    <!--  </div>-->
    <!--</el-dialog>-->
  </div>
</template>

<script>
export default {
  name: 'customer-detail',
  data() {
    return {
      activeName: 'first',
      itemRecordData: [{}],
      productRecordData: [{}],
      invoiceInfoData: [{}],
      addItemVisible: false,
      addItemFormData: {},
      addProductVisible: false,
      addProductFormData: {},
      addInvoiceVisible: false,
      addInvoiceFormData: {}
    }
  },
  computed: {
    btnName() {
      return this.activeName === 'first' ? '新增項目記錄' : this.activeName === 'second' ? '新增產品記錄' : this.activeName === 'third' ? '新增發票' : ''
    }
  },
  methods: {
    handleClick() {
      console.log(111111111)
      if (this.activeName === 'first') {
        this.addItem()
      } else if (this.activeName === 'second') {
        this.addProduct()
      } else {
        this.addInvoice()
      }
    },
    addItem() {
      this.addItemVisible = true
    },
    addProduct() {
      this.addProductVisible = true
    },
    addInvoice() {
      this.addInvoiceVisible = true
    },
    submitAddItem() {},
    submitAddProduct() {}
  }
}
</script>

<style scoped lang="less">
.customer-detail-container {
  h4 {
    font-size: 18px;
    line-height: 25px;
    margin: 0 0 22px 0;
  }
  .base-info {
    background: #fff;
    padding: 43px 70px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    .left {
      text-align: center;
      margin-right: 76px;
      .svg-icon {
        font-size: 84px;
        margin-bottom: 20px;
      }
      > div {
        font-size: 16px;
        line-height: 22px;
        font-weight: bold;
      }
    }
    .right {
      h5 {
        font-size: 16px;
        line-height: 22px;
        margin: 0 0 25px 0;
      }
      .one,
      .two {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        > div {
          width: 240px;
        }
        span {
          font-size: 16px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.7);
        }
        .group {
          padding: 5px 20px;
          font-size: 16px;
          line-height: 22px;
          background: rgba(60, 88, 252, 0.12);
          margin-left: 15px;
          &.vip {
            color: #3c58fc;
          }
          &.normal {
            color: #58bcce;
          }
          &.future {
            color: #f9b280;
          }
        }
      }
      .one {
        margin-bottom: 30px;
      }
    }
  }
  .main-wrap {
    background: #fff;
    padding: 40px 36px;
    position: relative;
    .el-table {
      ::v-deep .cell {
        overflow: unset;
      }
    }
    .btn {
      position: absolute;
      right: 36px;
      top: 40px;
      z-index: 9999;
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
    .status,
    .invoice-type {
      padding: 3px 16px;
      font-size: 16px;
      line-height: 22px;
      &.success {
        color: #58ce93;
        background: rgba(88, 206, 147, 0.16);
      }
    }
    .invoice-type {
      &.common {
        color: #3c58fc;
        background: rgba(60, 88, 252, 0.16);
      }
    }
  }
}
</style>
